<template>
 <tr>
    <td>
      <input type="checkbox" :checked="item.checked"  @change="$store.commit('checkFn',index)"/>
    </td>
    <td>
      {{ item.name }}
    </td>
    <td>
      {{ item.price }}
    </td>
    <td>
      <!-- 增加数量减少数量 -->
      <button @click="subFn(-1,index)">-</button>{{ item.num
      }}<button @click="subFn(1,index)">+</button>
    </td>
    <td>
      {{ item.price * item.num }}
    </td>
    <!-- 删除 根据索引删除-->
    <td><button @click="del(index)">删除</button></td>
  </tr>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  props: ['item', 'index'],
  methods: {
    // 辅助函数
    ...mapMutations(['delFn']),
    del (index) {
      this.delFn(index)
    },
    // 两个参数，一个是数量，根据索引来知道是哪一个
    subFn (num, index) {
      const newNum = this.item.num + num
      if (newNum < 1) return
      // 触发subChange函数，传过去两个参数，一个是数量，一个索引
      this.$store.commit('subChange', {
        num: newNum,
        index
      })
    }

  }
}
</script>

<style>

</style>
